<template>
	<div class="container">
		<el-checkbox-group
			v-model="checklist"
			:disabled="disabled"
			@change="changeCheckbox"
		>
			<el-checkbox
				v-for="(tag, index) in dynamicTags"
				:key="index"
				:label="tag.value"
				class="item"
			>
				<!-- <slot name="label">
					{{ tag.value }}
				</slot> -->

				<slot name="label">
					<el-tag
						:closable="!disabled"
						:disabled="disabled"
						:disable-transitions="false"
						@close="handleClose(tag)"
					>
						{{ tag.value }}
					</el-tag>
				</slot>
			</el-checkbox>
		</el-checkbox-group>

		<el-input-number
			v-if="inputVisible"
			ref="saveTagInput"
			v-model="inputValue"
			class="input-new-tag"
			:step="step"
			:precision="precision"
			step-strictly
			:controls="false"
			size="small"
			:disabled="disabled"
			@keyup.enter.native="handleInputConfirm"
			@blur="handleInputConfirm"
		></el-input-number>
		<el-button
			v-if="!inputVisible && !disabled"
			class="button-new-tag"
			:disabled="disabled"
			size="small"
			type="primary"
			@click="showInput"
		>
			{{ $t('dxn.game_rule.add') }}
		</el-button>
	</div>
</template>

<script>
export default {
	props: {
		value: {
			type: Array,
			default: () => []
		},
		disabled: {
			type: Boolean,
			default: false
		},
		min: {
			type: Number,
			default: 1
		},
		max: {
			type: Number,
			default: 100000000
		},
		step: {
			type: Number,
			default: 1
		},
		precision: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			checklist: [],
			dynamicTags: [],
			inputVisible: false,
			inputValue: ''
		}
	},
	computed: {
		// checklist: {
		// 	get() {
		// 		return this.dynamicTags
		// 			.filter((item) => item.checked)
		// 			.map((item) => item.value)
		// 	},
		// 	set(val) {
		// 		console.log('setval', val)
		// 		return val
		// 	}
		// }
	},
	watch: {
		value: {
			handler(val) {
				this.dynamicTags = val
				this.checklist = val
					.filter((item) => item.checked)
					.map((item) => item.value)
			},
			immediate: true
		},
		dynamicTags(val) {
			this.checklist = val
				.filter((item) => item.checked)
				.map((item) => item.value)
			this.$emit('input', val)
		}
	},
	methods: {
		handleClose(tag) {
			if (this.disabled) return
			this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
		},

		showInput() {
			this.inputVisible = true
			this.$nextTick((_) => {
				this.$refs.saveTagInput.$refs.input.focus()
			})
		},

		handleInputConfirm() {
			const inputValue = this.inputValue
			if (inputValue || Number(inputValue) === 0) {
				const arr = [...this.dynamicTags]
				if (arr.find((item) => item.value === inputValue)) {
					this.$message.info('已存在')
					return
				}
				arr.push({
					checked: false,
					value: inputValue
				})
				arr.sort((a, b) => a.value - b.value)
				this.dynamicTags = arr
			} else if (
				Number(inputValue) > Number(this.max) ||
				Number(inputValue) < Number(this.min)
			) {
				this.$message.error(
					this.$t('dxn.game_rule.range_of_input_values', {
						min: this.min,
						max: this.max
					})
				)
				this.inputVisible = false
				this.inputValue = ''
				return
			}
			this.inputVisible = false
			this.inputValue = ''
		},
		changeCheckbox(val) {
			this.dynamicTags = this.dynamicTags.map((item) => {
				if (val.includes(item.value)) {
					item.checked = true
				} else {
					item.checked = false
				}
				return item
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.el-tag + .el-tag {
	margin-left: 10px;
}
.button-new-tag {
	margin-left: 10px;
	height: 32px;
	line-height: 30px;
	padding-top: 0;
	padding-bottom: 0;
}
.input-new-tag {
	width: 90px;
	margin-left: 10px;
	vertical-align: bottom;
}
.item {
	margin-right: 20px;
	&:last-child {
		margin-right: 0;
	}
}
</style>
